<script setup>
import { onBeforeUnmount, watch } from 'vue'
import dayjs from 'dayjs'
const props = defineProps(['editNote', 'haveCover'])
const MAXSIZE = 500, index = ref(0) // 给图片计数，用于命名

// 记录一下首次获取到的数据项内容，用于更新数据时添加或覆盖
props.editNote.rawFiles = JSON.parse(JSON.stringify(props.editNote.noteFiles))

// 更改文件名列表方法，考虑了覆盖和添加情况
const updateKeys = (fs) => {
  if (props.editNote.isCoverFiles) props.editNote.noteFiles = fs.map(i => i.key)
  else props.editNote.noteFiles = [...props.editNote.rawFiles, ...fs.map(i => i.key)]
}

// 当覆盖/添加变化时，更新文件名
watch(() => props.editNote.isCoverFiles, n => updateKeys(props.editNote.fFiles ?? []))

// 关闭图片编辑后，自动删除附加属性
onBeforeUnmount(() => {
  delete props.editNote.isCoverFiles
  delete props.editNote.fFiles
  delete props.editNote.rawFiles
})

// 删除文件时
const handleRemove = (f, fs) => updateKeys(fs)

// :on-change="handleChange" // 状态变化，添加文件、上传成功、失败
const handleChange = (f, fs) => {
  // 判断大小
  // if (f.raw.size / 1024 / 1024 > MAXSIZE) {
  //   fs.pop()
  //   console.log("文件大小为：" + f.raw.size / 1024 / 1024)
  //   myMsgE('文件不符合要求')
  //   return false
  // }

  // 源文件名为后缀
  f.key = dayjs().format("YYMMDD_HHmm") + '-' + index.value++ + "-" + f.name
  updateKeys(fs)
}
</script>

<template>
  <el-upload v-model:file-list="editNote.fFiles" multiple :auto-upload="false" :on-change="handleChange"
    :on-remove="handleRemove">
    <template #trigger>
      <el-button type="primary" size="small">选择文件</el-button>
    </template>

    <el-switch v-if="haveCover == ''" v-model="editNote.isCoverFiles" inline-prompt active-text="覆盖" inactive-text="添加" />

    <template #tip>
      <span style="color:var(--mini-text-color);font-size: 12px;"> 文件小于{{ MAXSIZE }}MB.</span>
    </template>
  </el-upload>
</template>

<style scoped lang="less">
.el-switch {
  margin-left: 5px;
  margin-right: 5px;

  ::v-deep(.el-switch__core) {
    --el-switch-off-color: var(--el-color-primary);
    --el-switch-on-color: #13ce66;
  }
}

// 让下面不留5px空白
::v-deep(.el-upload-list) {
  margin-top: 0px;

  li {
    margin-top: 5px;
    margin-bottom: 0px;
  }
}
</style>